<template>
	<view class="content">
		<u-cell-group bg-color="transparent">
			<u-cell-item 
			v-for="item in news"
			:key="item.id"
			@click="detailClick(item.id)"
			:title="item.title" 
			:title-style="{color:'#ffffff'}"
			:icon-style="{color:'#ffffff'}"
			:label-style="{color:'#5c67ff'}"
			:label="item.create_time"></u-cell-item>
		</u-cell-group>
		<view class="msg" :class="{order_null:news.length<=0}">
			<u-empty v-if="news.length<=0" text="暂无开奖记录" mode="list"></u-empty>
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,//当前页码
				list_rows:15,//每页数量
				total:0,//数据总量
				status: 'loadmore',
				news:[]
			}
		},
		onReady() {
			
		},
		onLoad() {
			this.getnotice()
		},
		onPullDownRefresh(){
			this.page = 1
			this.news = []
			this.getnotice()
		},
		onReachBottom(){
			if(Math.ceil(this.total/this.list_rows)>this.page){
				this.page = this.page+1
				this.getnotice()
			}else{
				
			}
		},
		methods: {
			//公告
			getnotice(){
				this.status = 'loading'
				this.$http({
					url:this.$api.notice_getAll,
					method:'POST',
					hideLoading:false,
					data:{page:this.page,list_rows:this.list_rows},
					success:res=>{
						this.total = res.data.total
						if(Math.ceil(this.total/this.list_rows)<=this.page){
							this.status = 'nomore'
						}else{
							this.status = 'loadmore'
							
						}
						this.news = this.news.concat(res.data.data)
					},
					fail:err=>{
						this.status = 'nomore'
					},
					complete:e=>{
						uni.stopPullDownRefresh();
						if(!e.code){
							this.status = 'nomore'
						}
					}
				})
			},
			//查看详情
			detailClick(e){
				uni.navigateTo({
				    url: `./detail?id=${e}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		::v-deep .u-cell-item-box{
			background-color: transparent;
		}
		::v-deep .u-border-bottom:after{
			border-color: $border-bottom-color;
		}
		.msg{
			padding: 20rpx;
		}
		.order_null{
			position: fixed;
			left: 0%;
			top: 50%;
			width: 100%;
		}
	}
</style>
